<html>
	<head>
		<style type="text/css">
			*{ margin:0; border:0; padding:0 }
			
			#main { float: left; background-color: black; }
			
			#icons table td img{ cursor: pointer; }
			#icons { float: left; } 
			
			#caixaFoto { float: left; background-color: blue; }
			#caixaFoto #fotoGrande{ width: 440px; height: 320px; background-color: red; }
			#caixaFoto #legenda{ color: #fff; }
		</style>
		
		<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
		<script type="text/javascript">

			var descricao = {
				"img01":"aaaaaaa a a aaa aaaaa aaaaaaaaa",
				"img02":"bbbbbbbb b b bb bbb b bb b bb bbbbbb",
				"img03":"cccccccc cccc ccccc ccccccc cccc",
				"img04":"ddddddddd d dddddddd dddddddddd ddddddd"
			};
			
			var mostraFoto = function(imagem){
/*
$(request.responseXML).find("marker").each(function() { 
    var marker = $(this); 
    var point = new GLatLng( parseFloat(marker.attr("lat")),parseFloat(marker.attr("lng")) ) 
});*/
				//var chave = pegaNomeImagem(imagem);// Se naum tiver id
				var chave = imagem.id;//Se tiver id
				
				var fotoGrande = document.getElementById("fotoGrande");
				var foto = '<img src="../img/'+ chave +'.jpg" />';
				fotoGrande.innerHTML = foto;
				
				
				//var legenda = document.getElementById("legenda");
				//legenda.innerHTML = descricao[chave];
				
				var _trataRetorno = function(){
					
				};
				$(document).ready(function(){
				    $("#links").load("legendas.xml",null,_trataRetorno);
				});
				  
			};
			
			var pegaNomeImagem = function(imagem){
				var inicioNome = "img/";
				var tamInicioNome=inicioNome.length;

				var fimNome = "_";

				var inicio=imagem.src.indexOf(inicioNome)+tamInicioNome;
				var fim=imagem.src.indexOf(fimNome);

				return imagem.src.substring(inicio, fim);
			};
		</script>
	</head>
	<body>
		<div id="main">
			<div id="icons">
				<table>
					<tr>
						<td><img onclick="javascript:mostraFoto(this);" id="img01" src="../img/img01_mini.jpg" alt=" lalalallalal"/></td>
					</tr>
					<tr>
						<td><img onclick="javascript:mostraFoto(this);" id="img02" src="../img/img02_mini.jpg" /></td>
					</tr>
					<tr>
						<td><img onclick="javascript:mostraFoto(this);" id="img03" src="../img/img03_mini.jpg" /></td>
					</tr>
					<tr>
						<td><img onclick="javascript:mostraFoto(this);" id="img04" src="../img/img04_mini.jpg" /></td>
					</tr>
				</table>
			</div>
			<div id="caixaFoto">
				<div id="fotoGrande"><img src="../img/img01.jpg" /></div>
				<div id="legenda">&nbsp;</div>
			</div>
		</div>
	</body>
</html>